<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客列表</title>
    <link rel="stylesheet" href="css//game_hall.css">
    <link rel="stylesheet" href="css/login.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/common.js"></script>
</head>
<body>
<!-- 导航栏 -->
<div class="nav">
    五子棋对战
    <span class="spacer"></span>
    <div class="menu-container"> 
        <ul class="menu">
            <li><a href="">menu</a>
                <ul class="submenu">
                    <li><a href="game_hall">返回房间</a></li>
                    <li> <a href="login.html">退出登录</a></li>
                    <li><a href="user_info.html">个人信息</a></li>
                    <li><a href="Security_setting.html">密保设置</a></li>
                    <li><a href="userinfo_update.html">个人信息设置</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>
    <!-- 版心 -->
    <div class="login-container">
        <!-- 中间的登陆框 -->
        <div class="login-dialog">
            <h3>请上传你的头像<br>
            图片不能超过2MB</h3>
                <div class="row">
                <input type="file" id="file" accept="image/**" name="file">
                </div><br>
                <div class="row">
                    <button id="submit" onclick="mysub()">提交</button>
                </div>
        </div>
    </div>

<script>
        
        function mysub() {
            var formData = new FormData();
            //获取上传文件
            formData.append("file", $("#file")[0].files[0]);

            if (formData === null) {
                alert("请选择文件后再上传!");
                return;
            }

            // console.log(formData);

            // 2. 发送 ajax 请求
            $.ajax({
                // 请求类型
                type: "POST",
                // 请求的地址
<!--                url: "http://"+ location.host + "/user/photo",-->
                url: "/user/photo",

                // 请求的参数
                data: formData,
                // data: fd,
                processData: false,//- 必须false才会避开jQuery对 formdata 的默认处理,XMLHttpRequest会对 formdata 进行正确的处理
                contentType: false,//- 必须false才会自动加上正确的Content-Type
                // 回调函数
                success:function(result) {
                    // 响应的结果
                    if (result != null && result.code === 200 && result.data === 1) {
                        // 修改成功
                        alert("头像上传成功!");
                        location.href = "game_hall.html";
                    }  else {
                        alert("头像上传失败!请稍后重试!");
                    }
                }
            });
        }
    </script>
</body>

</html>
